<template> 
    <div class="waybillDetailwrap">
        <!-- <div class="titAddress">
            <p>起点: <span>上海市 浦东新区</span></p>
            <p>终点: <span>乌鲁木齐市 昌吉回族自治区</span></p>
        </div> -->
        <div class="waybillInfo">
            <div class="titleH3">
                <i></i>
                <h3>运单信息</h3>
            </div>
            <ul>
                <li><b>运单号</b>：<span>{{waybillInfo.transBillId}}</span></li>
                <li><b>运单日期</b>：<span>{{waybillInfo.transBillDate}}</span></li>
                <li><b>运单状态</b>：<span>{{transBillStatus | transBillStatus}}</span></li>
                <li><b>运输方式</b>：<span>{{waybillInfo.transTypeName}}</span></li>
                <li><b>运输总量</b>：<i>{{(waybillInfo.transWeight*1).toFixed(3)}}</i><span>吨</span></li>
                <li><b>运费包含</b>：<span>{{waybillInfo.feeName}}</span></li>
                <li><b>预计杂费</b>：<i>{{(waybillInfo.otherAmount*1).toFixed(2)}}</i><span>元（税率：{{waybillInfo.feeTaxRate*100}}%）</span></li>
                <li><b>运输要求</b>：<span>{{waybillInfo.transRequest}}</span></li>
            </ul>
        </div>
        <div class="lineInfo">
            <div class="lineSing" v-for='(item,index) in transportD'>
                <div class="titleH3">
                    <i></i>
                    <h3>线路{{index+1}}</h3>
                </div>
                <ul>
                    <li><i>起点</i>：<span>{{item.beginSiteProvince}}</span></li>
                    <li><i>终点</i>：<span>{{item.endSiteProvince}}</span></li>
                    <li><i>提货点</i>：<span>{{item.beginSiteStorage}}（{{item.beginSiteAddr}}）</span></li>
                    <li><i>联系人</i>：<span>{{item.beginSiteContract}}  {{item.beginSitePhone}}</span></li>
                    <li><i>提货时间</i>：<span>{{item.pickupTime}}</span></li>
                    <li><i>卸货点</i>：<span>{{item.endSiteStorage}}  {{item.endSiteAddr}}</span></li>
                    <li><i>联系人</i>：<span>{{item.endSiteContract}}   {{item.endSitePhone}}</span></li>
                    <li><i>卸货时间</i>：<span>{{item.deliveryTime}}</span></li>
                    <li><i>货物信息</i>：<span class="goodsSpan">{{item.productTypeNameByApp}} {{((item.totalGoodsWeightByApp || 0)*1).toFixed(3)}}吨 {{item.totalGoodsCountByApp}}件</span><a class="fr" href="javascript:;" @click='showGoods(item.transportGoodsVo)'>查看详情</a></li>
                    <li class="clearfix">
                        <div class="fl ">
                            <span class="disIcon"></span>
                          <span class="dispathInfoTit">调度信息</span>
                        </div>
                    </li>
                </ul>
                <ul class="dispatchInfoList">
                    <li v-for='(d,i) in item.tspDispatch'>
                        <span>{{d.vehicleNum}}</span>
                        <span>{{d.driverUserName}}</span>
                        <span>{{d.driverPhone}}</span>
                        <span>{{(d.dispatchWeight*1).toFixed(3)}}吨</span>
                        <span><a href="javascript:;" @click='queryReceiptInfo(d.dispatchId)'>查看</a></span>
                    </li>
                </ul>
            </div>
        </div>
        <mt-popup v-model="popupVisible" popup-transition="popup-fade">
            <mt-PopupTable :transportGoodsVo="transportGoodsVo"></mt-PopupTable>
        </mt-popup>
        <!-- 回单信息 -->
        <mt-popup v-model="receiptInfo" popup-transition="popup-fade">
            <div class="receiptInfoWrap">
                <div class="head">
                    <h3>回单信息</h3>
                    <span @click='receiptInfo = false'>×</span>
                </div>
                <ul class="info">
                    <li>
                        <span>回单吨位：</span>
                        <i>{{(actDispatchWeight*1).toFixed(3)}}吨</i>
                    </li>
                    <li>
                        <span>回单件数：</span>
                        <i>{{actDispatchCount}}件</i>
                    </li>
                    <li>
                        <span>实际杂费：</span>
                        <i>{{(otherFee*1).toFixed(2)}}元</i>
                    </li>
                </ul>
                <div class="imgShow">
                    <h3>装卸货图片</h3>
                    <ul class="imgGroup clearfix">
                        <li  v-for="(item, index) in stevedores">
                            <img class="wc-preview-img"  :src="item.attachmentUrl" @click="appShowImg($event, imgStevedores,index)">
                        </li>
                        
                    </ul>
                     <h3>签收单图片</h3>
                    <ul class="imgGroup clearfix">
                        <li  v-for="(item, index) in attachment">
                            <img class="wc-preview-img" :src="item.attachmentUrl" alt="" @click="appShowImg($event, imgAttachment,index)">
                        </li>
                      
                    </ul>
                     <h3>杂费发票图片</h3>
                    <ul class="imgGroup clearfix">
                        <li v-for="(item, index) in attachmentInvoice">
                            <img class="wc-preview-img" :src="item.attachmentUrl" alt="" @click="appShowImg($event, imgInvoice,index)">
                        </li>
                        
                    </ul>
                </div>
            </div>
        </mt-popup>
        <!-- <div class="needsclickWrap">
            <mt-button :disabled="disabled" class='btn needsclick' type="primary" size="large" @click.native='toOffer'>我要报价</mt-button>
        </div> -->
        <!-- 底部打开日期 -->
        <mt-datetime-picker
        ref="startPicker"
        type="datetime"
        v-model="startPickerValue"
        @confirm="start">
      </mt-datetime-picker>
      <mt-datetime-picker
        ref="endPicker"
        type="datetime"
        v-model="endPickerValue"
        @confirm="end">
      </mt-datetime-picker>
    </div>
</template>  
<script type="text/ecmascript-6">
import ApiService from '@/services/API-servies'
import { Tabbar, TabItem ,Cell,TabContainer,TabContainerItem,Button,Popup,DatetimePicker} from 'mint-ui';
import MTabbar from '../foot/Tabbarfoot'
import PopupTable from '../public/popupTable'
  export default {
    created() {
        this.getDetail();
    },
    data() {
      return {
        waybillInfo : {
            transBillId:'',
            transBillDate:'',
            transBillStatusName:'',
            transTypeName:'',
            transWeight:'',
            otherAmount:'',
            transRequest:'',
            feeName:'',
            transAmount:'',
            transPrice:'',
            quoteType:'',
            feeTaxRate:0.11
        },
        offerForm: {
            transBillId:'',
            quotationPrice:'',
            pickupTime:'',
            deliveryTime:'',
        },
        transportD:[],
        transportGoodsVo:[],
        popupVisible:false,
        popupVisible2:false,
        startPickerValue:new Date(),
        endPickerValue:new Date(),
        transBillStatus:'',
        disabled:true,
        selected: 'a',
        receiptInfo:false,
        actDispatchWeight:'0.00',
        actDispatchCount:'0',
        otherFee:'',
        attachment:[],
        attachmentInvoice:[],
        stevedores:[],
        imgStevedores:[],
        imgInvoice:[],
        imgAttachment:[],
        // setTransportStatus:''
      }
    },
    mounted(){
        setTimeout(() => {
            if(this.$isBrower.isAndroid){
            }else if(this.$isBrower.isIos){
                this.setIosTitleType();
            }
        }, 0);
    },
    methods: {
        toOffer(){
            this.popupVisible2 = true
        },
        getDetail(){
            // this.setTransportStatus = this.$route.query.setTransportStatus;
            let transBillId = this.$route.query.transBillId;
            this.offerForm.transBillId = transBillId;
            ApiService.driver.detail({
                transBillId:transBillId
            }).then((res) =>{
                if(res.meta.retCode === '0'){
                    this.assign(res.data);
                }
            });
        },
        assign(data){
            for(let item in this.waybillInfo){
                this.waybillInfo[item] = data[item];
            };
            this.transportD = data.transportD;
            this.transBillStatus = data.transBillStatus
        },
        showGoods(transportGoodsVo){
            this.popupVisible=true;
            this.transportGoodsVo=transportGoodsVo
        },
        openStartPicker() {
            this.$refs.startPicker.open()
        },
        openEndPicker() {
            this.$refs.endPicker.open();
        },
        start(value){
            let start = this.$moment(value).format("YYYY-MM-DD HH:mm");
            this.offerForm.pickupTime = start;
        },
        end(value){
            let end = this.$moment(value).format("YYYY-MM-DD HH:mm");
            this.offerForm.deliveryTime = end;
        },
        submitOffer(){
            let offerForm =  JSON.stringify(this.offerForm);
            ApiService.quotation.offer(this.offerForm).then((res) =>{
                console.log(res)
            });
        },
        //ios 设置头部信息
          setIosTitleType(){
            let params = {
              isReturn: true,
              isSearch: false,
              isTitleSegment:false
            };
            this.$bridge.callhandler('needBarButton', params, (data) => {})
          },
        queryReceiptInfo(dispatchId){
            ApiService.receipt.tspDispatchDetail({
                    dispatchId:dispatchId
            }).then((res) =>{
                if(res.meta.retCode != '0'){
                    return ;
                }
                var _dispach = res.data;
                this.actDispatchWeight = _dispach.actDispatchWeight;
                this.actDispatchCount = _dispach.actDispatchCount;
                this.otherFee = _dispach.otherFee;
                this.attachment = _dispach.attachment;
                this.attachmentInvoice = _dispach.attachmentInvoice;
                this.stevedores = _dispach.stevedores;

                this.imgStevedores = [];
                for (var i = this.stevedores.length - 1; i >= 0; i--) {
                    this.imgStevedores.push(this.stevedores[i].attachmentUrl);
                }
                this.imgInvoice = [];
                this.imgAttachment = [];
                for (var i = this.attachmentInvoice.length - 1; i >= 0; i--) {
                    this.imgInvoice.push(this.attachmentInvoice[i].attachmentUrl);
                }    
                for (var i = this.attachment.length - 1; i >= 0; i--) {
                    this.imgAttachment.push(this.attachment[i].attachmentUrl);
                }  
            })
            this.receiptInfo = true;
        },
        appShowImg($event,list,index){
            let params = {
                currentIndex:index,
                pickerList:list 
              };
            if(this.$isBrower.isIos){
              this.$bridge.callhandler('LookBigPictureAction', params, (data) => {})
            }
            if(this.$isBrower.isAndroid){
              app.showImg(params);
            }
        }
    },
    filters: {
        transBillStatus(val){
            if(val == 30){
                return '待竞价'
            }else if(val == 50){
                return '待选择'
            }else if(val == 60){
                return '参与竞价'
            }else if(val == 65){
                return '待调度'
            }else if(val == 60){
                return '已派运'
            }else if(val == 68){
                return '已送达'
            }else if(val == 70){
                return '返单待确认'
            }else if(val == 71){
                return '返单待客户确认'
            }else if(val == 80){
                return '运输完成'
            }else if(val == 95){
                return '结算完成'
            }
        }
   
    },
    watch: {
        /*transBillStatus:function(val, oldVal){
            if(val == 40){
                this.disabled = false;
            }
        },*/
    },
    components: {
      MtTabbar : Tabbar,
      MtTabItem : TabItem,
      mtCell : Cell,
      MtTabContainer : TabContainer,
      MtTabContainerItem : TabContainerItem,
      MTabbar,
      MtButton:Button,
      MtPopup:Popup,
      MtPopupTable:PopupTable,
      MtDatetimePicker:DatetimePicker
    }
  }
</script>

<style scoped lang="less" rel="stylesheet/less">
  @import "~common/less/variable";
  @import "~common/less/modules/waybillDetail.less";
  @import "~common/less/modules/public.less";
  .waybillDetailwrap{
      .mint-popup{
          overflow-y:auto;
      }
        i,span{
            font-weight: 400;
        }
        i, b{
          text-align: justify;
          text-align-last: justify;
          line-height: 0;
        }
    }
  .quote{
    width: 756px;
    padding: 30px;
    .row{
        padding:10px 30px;
        input{
            padding: 10px;
            width: 680px;
            border: 2px solid #ccc;
            border-radius: 6px;
            font-size: 15px;
            &.priceIpt{
                width: 500px
            }
        }
        .priceText{
            font-size: 16px;
            color: #3180FF
        }
    }
    .price{
        font-size: 14px;
        i{
            color: #FB0015
        }
        .allPrice{
            margin-left: 60px
        }
    }
  }
</style>
